<template>
    <view class="pronumbox">
        <u-number-box v-model="skunum" min="0" max="99" @change="numChange">
            <template #minus>
                <view class="minus numbtn" :class="skunum <= 0 ? 'none' : ''">
                    <u-icon name="minus" size="12" color="#ccc"></u-icon>
                </view>
            </template>
            <template #input>
                <text class="input" :class="skunum <= 0 ? 'none' : ''">{{ skunum }}</text>
            </template>
            <template #plus>
                <view slot="plus" class="plus numbtn">
                    <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
                </view>
            </template>
        </u-number-box>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '../../../stores/shop/car';
const skunum = ref(0);

const props = defineProps({
    item: {
        type: Object,
        default: {}
    }
});

skunum.value = props.item.shopNum || 0;

const useCar = useCounterStore();
const numChange = (e) => {
    useCar.setList(e.value, props.item);
};
</script>

<style lang="scss">
.pronumbox {
    .numbtn {
        width: 40rpx;
        height: 40rpx;
        display: flex;
        justify-content: center;
    }

    .minus {
        border: 1px solid #ccc;
    }

    .plus {
        background: red;
    }

    .input {
        width: 60rpx;
        height: 40rpx;
        font-size: 26rpx;
        color: #888;
        display: flex;
        justify-content: center;
    }

    .none {
        display: none;
    }
}
</style>
